<template>
  <div class="process-message" ref="messageContainer">
    <div class="btn" @click="addMsg">add msg</div>
    <ul class="msg-ul">
      <li class="msg-item"
        v-for="(v, i) in msgList"
        :key="i"
      >{{v}}</li>
    </ul>
  </div>
</template>

<script setup>
  import { ref, nextTick } from 'vue'

  const msgList = ref(Array(30).fill(1))
  const messageContainer = ref(null)

  const addMsg = () => {
    msgList.value.push(2)
    // 始终让底部最新消息显示出来
    nextTick(() => {
      messageContainer.value.scrollTo({
        top: messageContainer.value.scrollHeight,
        behavior: 'smooth'
      })
    })
  }
</script>

<style lang="scss" scoped>
  .process-message {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    padding: 6px 2px;

    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track,
    &::-webkit-scrollbar-thumb {
      width: 0;
      height: 0;
    }

    .msg-ul {
      .msg-item {
        color: olive;
      }
    }

    .btn {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 50px;
      width: 90px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      background-color: #8bc5f7;
      border-radius: 6px;
      cursor: pointer;
    }
  }
</style>